<template>
	<div class="notice-comp">
		<transition name="fade">
			<div class="z1001mask notice-container" v-if="isShow">
				<div class="notice-content">
					<img  style="width: 90px;height: 90px;margin: 0 auto;display: block" src="../assets/pop/warn.png"/>
					<p v-html="content" style="text-aligh:center"></p>
          <div style="margin-top: 30px;text-align: center">
            <Button size="large" style="margin-right: 20px" @click="closePop">取消</Button>
            <Button size="large" type="primary" @click="confirm">确定</Button>
          </div>
				</div>
			</div>
		</transition>
	</div>
</template>
<script>
export default {
  name: "z1001Modal",
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  },
  /*
	props:
		isShow		bool 是否显示弹窗
		imgSrc		str  弹窗图片src 必须来自 /static/images/ 路径下
		content		str  弹窗文字（可以包含html标签 类等）
	例子：
		在需要引用notice的组件中 如account.page.vue
		<template>插入组件：
			<Notice @closeNotice='toggleNotice' :isShow='isShowCorrect' imgSrc='/static/images/smile.png' content='密码修改成功!<br><span class="xxx"></span>' />
		<script>：
			data：
				isShowCorrect: false
			methods: 
				//也使用这个事件打开弹窗
				toggleNotice: function () { 
            		this.isShowCorrect = !this.isShowCorrect
        		},
	*/
  data: function() {
    return {};
  },
  methods: {
    closePop() {
      this.$emit("on-close");
    },
    confirm() {
      this.$emit("on-confirm");
    }
  }
};
</script>
<style lang='less'>
.z1001mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.notice-comp {
  position: fixed;
  z-index: 1001;
}
.notice-container {
  display: flex;
  .notice-content {
    position: fixed;
    top: 200px;
    width: 260px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 14px 8px;
    background: white;
    line-height: 18px;
    img {
      width: 90px;
    }
    a {
      display: block;
      width: 120px;
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
      color: white;
      background: #28b493;
    }
    p {
      padding: 20px 18px;
      text-align: center;
      font-size: 14px;
      line-height: 18px;
    }
  }
}
</style>